<template>
  <div>
    <AxiomSection>
      <AxiomTitle level="4" title="按钮 AxiomButton" />
      <AxiomText type="secondary">用于触发即时操作的可点击元素，支持多种预设样式。</AxiomText>
      <AxiomCard>
        <AxiomGroup direction="vertical">
          <AxiomGroup :wrap="true">
            <AxiomButton>默认按钮</AxiomButton>
            <AxiomButton type="primary">主要按钮</AxiomButton>
            <AxiomButton type="success">成功按钮</AxiomButton>
            <AxiomButton type="warning">警告按钮</AxiomButton>
            <AxiomButton type="danger">危险按钮</AxiomButton>
          </AxiomGroup>
          <AxiomGroup :wrap="true">
            <AxiomButton plain>朴素按钮</AxiomButton>
            <AxiomButton type="primary" plain>主要按钮</AxiomButton>
            <AxiomButton type="success" plain>成功按钮</AxiomButton>
            <AxiomButton type="warning" plain>警告按钮</AxiomButton>
            <AxiomButton type="danger" plain>危险按钮</AxiomButton>
          </AxiomGroup>
          <AxiomGroup :wrap="true">
            <AxiomButton round>圆角按钮</AxiomButton>
            <AxiomButton type="primary" round>主要按钮</AxiomButton>
            <AxiomButton type="success" round>成功按钮</AxiomButton>
            <AxiomButton type="warning" round>警告按钮</AxiomButton>
            <AxiomButton type="danger" round>危险按钮</AxiomButton>
          </AxiomGroup>
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="标题 AxiomTitle" />
      <AxiomText type="secondary">用于内容区域的层级划分，支持多级标题和副标题。</AxiomText>
      <AxiomCard>
        <AxiomTitle level="1" title="一级标题" />
        <AxiomTitle level="2" title="二级标题" />
        <AxiomTitle level="3" title="三级标题" />
        <AxiomTitle level="4" title="四级标题" description="这是一个副标题" />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="文本 AxiomText" />
      <AxiomText type="secondary">基础的文本显示组件，支持不同状态颜色、大小和溢出省略功能。</AxiomText>
      <AxiomCard>
        <AxiomText>默认文本</AxiomText>
        <AxiomText type="primary">主要文本</AxiomText>
        <AxiomText type="secondary">次要文本</AxiomText>
        <AxiomText type="success">成功文本</AxiomText>
        <AxiomText type="warning">警告文本</AxiomText>
        <AxiomText type="danger">危险文本</AxiomText>
        <AxiomText size="small">小型文本</AxiomText>
        <AxiomText size="large">大型文本</AxiomText>
        <AxiomText :ellipsis="{ rows: 2, expandable: true }">
          这是一个非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文本，它会根据配置进行省略。
        </AxiomText>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="链接 AxiomLink" />
      <AxiomText type="secondary">用于页面跳转或执行操作的文本链接。</AxiomText>
      <AxiomCard>
        <AxiomGroup>
          <AxiomLink href="#">默认链接</AxiomLink>
          <AxiomLink href="#" type="primary">主要链接</AxiomLink>
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="图标 AxiomIcon" />
      <AxiomText type="secondary">语义化的矢量图形，支持旋转动画。</AxiomText>
      <AxiomCard>
        <AxiomGroup>
          <AxiomIcon name="fas fa-home" />
          <AxiomIcon name="fas fa-cog" spin />
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="标签 AxiomTag" />
      <AxiomText type="secondary">用于信息的标记和分类，提供多种颜色主题。</AxiomText>
      <AxiomCard>
        <AxiomGroup :wrap="true">
          <AxiomTag label="标签" />
          <AxiomTag type="success" label="成功" />
          <AxiomTag type="info" label="信息" />
          <AxiomTag type="warning" label="警告" />
          <AxiomTag type="danger" label="危险" />
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="输入框 AxiomInput" />
      <AxiomText type="secondary">基础的文本输入控件，支持清除和密码可见功能。</AxiomText>
      <AxiomCard>
        <AxiomGroup direction="vertical" style="max-width: 300px;">
          <AxiomInput placeholder="请输入内容" />
          <AxiomInput placeholder="带清除功能" clearable />
          <AxiomInput placeholder="密码输入框" show-password />
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="数字输入 AxiomNumber" />
      <AxiomText type="secondary">仅允许输入数字的控件。</AxiomText>
      <AxiomCard>
        <AxiomNumber v-model="numberValue" />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="选择器 AxiomSelect" />
      <AxiomText type="secondary">下拉选择器，用于从列表中选择一个或多个值。</AxiomText>
      <AxiomCard>
        <AxiomSelect v-model="selectValue" :options="selectOptions" placeholder="请选择" block/>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="日期选择器 AxiomDatePicker" />
      <AxiomText type="secondary">用于选择或输入日期的控件。</AxiomText>
      <AxiomCard>
        <AxiomDatePicker v-model="dateValue" />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="时间选择器 AxiomTimePicker" />
      <AxiomText type="secondary">用于选择或输入时间的控件。</AxiomText>
      <AxiomCard>
        <AxiomTimePicker v-model="timeValue" />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="卡片 AxiomCard" />
      <AxiomText type="secondary">承载信息的容器，可包含标题和内容，用于信息分组。</AxiomText>
      <AxiomCard>
        <AxiomCard title="这是一个卡片标题">
          <AxiomText>卡片内容区域。</AxiomText>
        </AxiomCard>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="进度条 AxiomProgress" />
      <AxiomText type="secondary">动态展示任务的当前进度。</AxiomText>
      <AxiomCard>
        <AxiomProgress :percentage="50" />
        <AxiomProgress :percentage="100" status="success" />
        <AxiomProgress :percentage="70" status="warning" />
        <AxiomProgress :percentage="50" status="danger" />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="空状态 AxiomEmpty" />
      <AxiomText type="secondary">用于无数据时的占位提示。</AxiomText>
      <AxiomCard>
        <AxiomEmpty />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="代码 AxiomCode" />
      <AxiomText type="secondary">用于展示格式化的高亮代码块。</AxiomText>
      <AxiomCard>
        <AxiomCode language="javascript" content="const hello = 'world';" />
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="引用 AxiomBlockquote" />
      <AxiomText type="secondary">用于突出显示引用的文本段落。</AxiomText>
      <AxiomCard>
        <AxiomBlockquote>这是一个引用块。</AxiomBlockquote>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="对话框 AxiomDialog" />
      <AxiomText type="secondary">在当前页面上弹出的模态窗口，用于承载信息或操作。</AxiomText>
      <AxiomCard>
        <AxiomButton @click="dialogVisible = true">打开对话框</AxiomButton>
        <AxiomDialog v-model="dialogVisible" title="提示">
          <span>这是一段信息</span>
        </AxiomDialog>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="通知 Notification" />
      <AxiomText type="secondary">全局展示的通知提醒信息，通常显示在页面右上角。</AxiomText>
      <AxiomCard>
        <AxiomGroup :wrap="true">
          <AxiomButton @click="showNotification('success')">成功 Success</AxiomButton>
          <AxiomButton @click="showNotification('info')">信息 Info</AxiomButton>
          <AxiomButton @click="showNotification('warning')">警告 Warning</AxiomButton>
          <AxiomButton @click="showNotification('error')">错误 Error</AxiomButton>
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="轻提示 Toast" />
      <AxiomText type="secondary">页面顶部或中部的轻量级信息反馈。</AxiomText>
      <AxiomCard>
        <AxiomGroup :wrap="true">
          <AxiomButton @click="showToast('success')">成功 Success</AxiomButton>
          <AxiomButton @click="showToast('info')">信息 Info</AxiomButton>
          <AxiomButton @click="showToast('warning')">警告 Warning</AxiomButton>
          <AxiomButton @click="showToast('error')">错误 Error</AxiomButton>
        </AxiomGroup>
      </AxiomCard>
    </AxiomSection>

    <AxiomSection>
      <AxiomTitle level="4" title="错误页面 AxiomErrorPage" />
      <AxiomText type="secondary">用于显示如 404、500 等错误状态的页面。</AxiomText>
      <AxiomCard>
        <AxiomErrorPage code="404" />
      </AxiomCard>
    </AxiomSection>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue';
import {
  AxiomButton, AxiomTitle, AxiomText, AxiomLink, AxiomIcon, AxiomTag, AxiomInput, AxiomNumber, AxiomSelect, AxiomDatePicker, AxiomTimePicker,
  AxiomCard, AxiomProgress, AxiomEmpty, AxiomCode, AxiomBlockquote, AxiomDialog, AxiomErrorPage,
  AxiomSection, AxiomGroup,
} from 'axiom-view';

const axiomUtils = inject('axiom-utils');

const numberValue = ref(0);
const selectValue = ref(null);
const selectOptions = ref([
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' },
  { label: '选项3', value: 'option3' },
]);
const dateValue = ref(null);
const timeValue = ref(null);
const dialogVisible = ref(false);

const notifications = {
  success: { title: '成功', message: '这是一条<b>成功</b>的通知消息。' },
  info: { title: '信息', message: '这是一条普通的<b>信息</b>通知。' },
  warning: { title: '警告', message: '这是一条需要注意的<b>警告</b>信息。' },
  error: { title: '错误', message: '操作失败，这是一个<b>错误</b>通知。' },
};

const showNotification = (type) => {
  axiomUtils.notification[type](notifications[type]);
};

const showToast = (type) => {
  axiomUtils.toast[type](`这是一个 ${type} 类型的轻提示消息。`);
};
</script>